<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: LiYansheng
 * @Date: 2022-03-31 23:34:51
 * @LastEditors: CoderXZ
 * @LastEditTime: 2022-05-15 00:42:50
-->
<template>
  <div>
    <div class="container">
      <a href="http://www.liyansheng.top:3370/Graduation_Design_Notes/">笔记</a>
      <el-tabs>
        <el-tab-pane label="我的问答">
          <Avatar
            shape="square"
            :username="name"
            :src="avatar"
            background-color="#ccc"
            color="#fff"
            style="vertical-align: middle"
            :inline="true"
          >
          </Avatar
          >{{ name }}
          <el-divider></el-divider>
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </el-tab-pane>
        <el-tab-pane label="问答广场">
          <el-row>
            <el-col :span="18" :offset="3">
              <el-input
                v-model="text"
                placeholder="输入你的疑问"
                type="textarea"
              ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" :offset="17">
              <el-button type="primary" plain>重置</el-button>
              <el-button type="primary" style="margin-top: 5px">我要说两句</el-button>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="18" :offset="3">
              <!-- <el-card> hah </el-card> -->
              <el-avatar></el-avatar
              ><span class="c1">
                <el-tag type="success">教师</el-tag>

                用户名<el-divider direction="vertical"></el-divider>
                发布时间
              </span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18" :offset="3"> 内容 </el-col>
          </el-row>
          <el-row>
            <el-col :span="18" :offset="3">
              <el-button type="primary">回复</el-button>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";

import { Avatar } from "vue-avatar";
export default {
  components: {
    Avatar,
  },
  data() {
    return {
      // avatar:
      //   "http://rb74qyvdb.hn-bkt.clouddn.com/2022/05/12/3f460c728e6b443fa60b1275b5d9764e.png",
      avatar: null,
      text: null,
      name: "黄金 燕",
      options: regionDataPlus,
      selectedOptions: [],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
      console.log(CodeToText[this.selectedOptions[0]]);
      console.log(CodeToText[this.selectedOptions[1]]);
      console.log(CodeToText[this.selectedOptions[2]]);
    },
  },
};
</script>

<style>
.c1 {
  margin-top: 0;
}
</style>
